<!-- 员工学习情况列表 -->
 <template>
  <view class="container">
    <view class="content">
      <!-- 学生卡片 -->
      <view class="card_item">
        <view class="itemLeft">
          <image
            class="photo"
            :src="
              info.avatar
                ? info.avatar
                : require('.../../static/images/avatar_default.png')
            "
            alt=""
          ></image>
        </view>
        <view class="itemRight">
          <view class="stuName">
            <div>{{ info.nickName }}</div>
            <image
              class="sex"
              :src="
                info.sex == 1
                  ? require('../static/images/teaching/women.png')
                  : require('../static/images/teaching/man.png')
              "
              alt=""
            ></image>
          </view>
          <view class="studyProgress">
            <view class="percentage_value">
              <van-progress
                stroke-width="5px"
                :percentage="info.learningProgress"
                color="linear-gradient(270deg, #F76B1C 0%, #FAD961 100%)"
                track-color="#ececec"
              />
            </view>
            <text class="percentage_num">{{ info.learningProgress }}%</text>
          </view>
        </view>
      </view>
      <!-- 课程信息 -->
      <view class="courseDetail" v-if="info.chapters">
        <uni-collapse class="collapse">
          <uni-collapse-item
            v-for="(item, index) in info.chapters"
            :key="index"
            style="margin-top: 20rpx"
            :border="false"
            title-border="none"
            show-animation
            :title="item.chapterName"
          >
            <view
              class="detail_card"
              v-for="(task, taskIndex) in item.tasks"
              :key="taskIndex"
            >
              <view class="detail_l">
                <image
                  v-if="task.studyStatus == 2"
                  class="isend"
                  src="../static/images/studyDetail/endstudy.png"
                  alt=""
                ></image>
                <image
                  v-if="task.studyStatus == -1"
                  class="isend"
                  src="../static/images/studyDetail/nostudy.png"
                  alt=""
                ></image>
                <image
                  v-if="task.studyStatus == 1"
                  class="isend"
                  src="../static/images/studyDetail/unthrough.png"
                  alt=""
                ></image>
              </view>
              <!-- 0未开始 1学习中 2已完成 -1未完成 -->
              <view class="detail_r">
                <view class="detail_name"> {{ task.taskName }} </view>
                <view class="detail_t">
                  <view class="triangle"></view>
                  <view class="studyItem">
                    <view class="itemTitle">学习时长</view>

                    <view class="itemText">
                      <!-- 秒转化为时 取一位小数 -->
                      {{ (task.study_time / 3600).toFixed(1) }}h</view
                    >
                  </view>
                  <view class="studyItem">
                    <view class="itemTitle">补考次数</view>
                    <view class="itemText">{{ task.applyOnlineExamNum }}</view>
                  </view>
                  <view class="studyItem">
                    <view class="itemTitle">考核成绩</view>
                    <view class="itemText">{{ task.score }}</view>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>
  </view>
</template>
 <script>
import { teaStudentTaskProgress } from "@/common/api/teachingRecord";
export default {
  data() {
    return {
      active: 0,
      safeAreaInsetsTop: "",
      navigationBarHeight: "",
      h: "",
      info: "",
      isOpen: true,
      courseStuId: "",
    };
  },
  watch: {},
  onLoad(options) {
    if (options.courseStuId) {
      this.courseStuId = options.courseStuId;
    }
  },
  onShow() {
    this.getList();
  },

  methods: {
    /* 获取卡片列表 */
    async getList() {
      uni.showLoading({ mask: true, title: "加载中" });
      let res = await teaStudentTaskProgress(this.courseStuId);
      this.info = res.data;
      uni.setNavigationBarTitle({
        title: res.data.courseName,
      });
    },
    /* 去批改 */
    toCorrect(user) {
      uni.navigateTo({
        url: `/pages/selectiCourse/task?taskId=${this.info.lastTaskInfo.taskId}&courseId=${this.info.lastTaskInfo.courseId}&courseSchedulingId=${this.info.lastTaskInfo.courseSchedulingId}`,
      });
    },
    /* 去员工学习详情 */
    toStudyDetail(user) {},

    checkOpen() {
      this.isOpen = !this.isOpen;
    },
  },
};
</script>
 <style lang="scss" scoped>
.container {
  width: 750rpx;
  min-height: 100vh;
  background: #ffffff;

  .content {
    padding: 20rpx;

    box-sizing: border-box;

    .card_item {
      width: 100%;
      height: 132rpx;
      background: #ffffff;
      padding: 24rpx;
      box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
      border-radius: 8rpx;
      box-sizing: border-box;
      display: flex;

      .itemLeft {
        margin-right: 16rpx;

        .photo {
          width: 64rpx;
          height: 64rpx;
          border-radius: 16rpx;
        }
      }

      .itemRight {
        .studyProgress {
          margin-top: 8rpx;
          display: flex;
          align-items: center;

          .percentage_value {
            width: 220rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }

          .percentage_num {
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #f85314;
            line-height: 34rpx;
            margin-left: 20rpx;
          }
        }

        .stuName {
          display: flex;
          align-items: center;
        }

        .sex {
          width: 24rpx;
          height: 24rpx;
          margin-left: 16rpx;
        }
      }
    }

    .courseDetail {
      margin-top: 28rpx;

      .courseItem {
        width: 100%;
        min-height: 96rpx;
        background: #f6fafe;
        border-radius: 8rpx;
        padding: 20rpx;
        box-sizing: border-box;

        .stepName {
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 40rpx;
        }

        .itemHead {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10rpx;

          .openIcon {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}

.detail_card {
  height: 200rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  padding: 20rpx 24rpx;
  box-sizing: border-box;

  .detail_l {
    margin-right: 24rpx;

    .isend {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .detail_r {
    width: 100%;
  }

  .detail_name {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
  }

  .detail_t {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f7f8fa;
    box-sizing: border-box;
    border-radius: 18rpx;
    margin-top: 18rpx;
    height: 100rpx;
    width: 100%;
    position: relative;

    .triangle {
      position: absolute;
      top: -18rpx;
      left: 18rpx;
      width: 0;
      height: 0;
      border-left: 26rpx solid transparent;
      border-right: 26rpx solid transparent;
      border-bottom: 26rpx solid #f7f8fa;
    }

    .studyItem {
      text-align: center;

      .itemTitle {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 34rpx;
      }

      .itemText {
        marging-top: 4rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 40rpx;
      }
    }
  }
}

// :deep(.uni-collapse-item) {
// 	background: #F6FAFE;
// }

// .collapse .uni-collapse-item__title-box {
// 	background: #F6FAFE;
// }

::v-deep .uni-collapse-item__title {
  background: #f6fafe;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
}

::v-deep .uni-collapse-item__title-text {
  background: #f6fafe;
}

::v-deep .uni-collapse-item__wrap-content {
  background: #f6fafe;
  padding: 0 20rpx 20rpx 20rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
}

::v-deep .uni-collapse-item__title-box {
  padding: 0;
  // height: 96rpx;
}
::v-deep .uni-collapse {
  margin-bottom: 20rpx;
}
</style>